<!--
 * @Description: 同步测评的弹窗
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 17:21:37
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-26 18:43:43
 -->
<template>
  <div class="div-inline">
    <el-button size="mini" type="primary" @click="to"> 同步测评 </el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'同步测评信息'" width="700px" class="sync-eval">
      <div class="tips">
        <p>1、源订单和待同步的订单只能归属于同一个营养师</p>
        <p>2、待同步的订单和源订单最好是同一个用户的订单</p>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="140px">
        <el-form-item label="需要同步的订单ID" prop="origin_service_id">
          <el-input v-model="form.origin_service_id" size="small" style="width:50%" />
          <el-button type="warning" size="small" @click="getEvalList"> 检索</el-button>
        </el-form-item>
        <el-form-item v-if="evals.length > 0" label="选择测评信息" prop="tids">
          <el-checkbox-group v-model="checkedTids" @change="handleCheckboxChange">
            <el-checkbox v-for="eval1 in evals" :label="eval1.tid" :key="eval1.tid">{{ eval1.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    serviceId: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        service_id: '',
        origin_service_id: '',
        tids: []
      },
      evals: [],
      dialog: false,
      loading: false,
      checkedTids: [],
      rules: {
        origin_service_id: [
          { required: true, message: '请输入需要同步的订单ID', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    to() {
      this.form.service_id = this.serviceId
      this.dialog = true
    },
    handleCheckboxChange(val) {
      this.form.tids = val
    },
    getEvalList() {
      this.evals = []
      this.checkedTids = []
      if (this.form.origin_service_id === '') {
        this.$notify({ title: '提示', message: '原始订单ID不能为空', type: 'error', duration: 2500 })
        return false
      }
      this.$api.order.service
        .getEvalList({
          params: this.form
        })
        .then(res => {
          this.evals = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    doSubmit() {
      this.form.tids = this.checkedTids
      this.$confirm('确认要同步测评信息吗？')
        .then(_ => {
          this.$api.order.service
            .syncEval({
              data: this.form
            })
            .then(res => {
              this.$notify({ title: '提示', message: '同步测评成功', type: 'success', duration: 2500 })
              this.dialog = false
              this.$parent.init()
            }).catch(err => {
              console.log(err)
            })
        })
        .catch(_ => {})
    }
  }
}
</script>

<style>
.div-inline {
  display: inline;
  margin-right: 3px;
}
.sync-eval .el-form--label-right .el-form-item__label {
  color: #b6b6b6 !important;
}
.sync-eval .el-form-item {
  margin-bottom: 0px;
}
</style>
